<template>
    <div class="leftFx">
        <ThemeTitle :title="title"/>
        
        <div class="zerenContent">
            <div class="zerenTitle">
                <div>本月责任落实预警</div>
                <div>责任落实区域分析</div>
            </div>
            
        </div>
        <div class="twoCharts">
            <div id="yujingChart"></div>
            <div id="fenxiChart"></div>
        </div>    
        <!-- 隐患排查 -->
        <div class="geoIntro" style="margin-top:23px">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">隐患排查</div>
            </div>
            <!-- select -->
            <div >

            </div>
        </div>
        <!-- 隐患排查 -->
        <div class="yhpcList">
            <div>
                <div v-for="(item,index) of yinhuanList" :key="index">
                    <span>{{item.name}}:</span>
                    <span>{{item.val}}</span>
                </div>
            </div>
        </div>
        <div id="yhpcChart">

        </div>
    </div>
</template>

<script>
    import ThemeTitle from "../../common/ThemeTitle"
    import {
        defineComponent,
        getCurrentInstance,
        onMounted,
        ref,
        provide 
    } from 'vue'
    import { useRouter } from 'vue-router'
    export default {
        components: {
            ThemeTitle
        },
        setup(){
            const title = provide("title", "主体责任落实分析"); 
            const { ctx } = getCurrentInstance();

            const numList = [
                2,5,1,3,8,0
            ]
            
            function drawYj(){
                var dom = document.getElementById("yujingChart");
                var myChart = ctx.$echarts.init(dom);
                    let dataMax = 60;
                    const source = {
                        data: [43, 10, 28, 35, 50],
                        indicator: [
                            { name: '家政服务', max: dataMax},
                            { name: '助餐服务', max: dataMax},
                            { name: '助医服务', max: dataMax},
                            { name: '待办服务', max: dataMax},
                            { name: '交谈服务', max: dataMax},
                        
                        ]
                    }
                    const buildSeries = function(data){
                        const helper = data.map((item, index) => {
                            const arr = new Array(data.length);
                            arr.splice(index, 1, item);
                            return arr;
                        })

                        return [data, ...helper].map((item, index) => {
                            return {
                                type: 'radar',
                                itemStyle: {
                                color: '#31e586'
                                },
                                lineStyle: {
                                color: index === 0 ? '#31e586' : 'transparent'
                                },
                                areaStyle: {
                                color: index === 0 ? '#31e586' : 'transparent',
                                opacity: 0.3
                                },
                                tooltip: {
                                show: index === 0 ? false : true,
                                formatter: function() {
                                    return source.indicator[index - 1].name + '不满意度：' + source.data[index - 1]+'%';
                                }
                                },
                                z: index === 0 ? 1 : 2,
                                data: [item]
                            }
                            })
                    }

                var option = {
                    tooltip: {},
                    radar: {
                    // shape: 'circle',
                    name: {
                        textStyle: {
                            fontSize: 14,
                            color: ['#d1dbf2'],
                            padding: [1, 5]
                        }
                    },
                    splitNumber: 4,
                    splitArea: {
                        show: true,
                        areaStyle: {
                        color: ['rgba(12,62,129,0)','rgba(12,62,129,0.3)','rgba(12,62,129,0)','rgba(12,62,129,0)']
                        }
                    },
                    splitLine: {
                        lineStyle: {
                        color: '#0c3e81'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                        color: '#0c3e81'
                        }
                    },
                    indicator: source.indicator
                    },
                    series: buildSeries(source.data)
                };

                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            function drawFx(){
                var dom = document.getElementById("fenxiChart");
                var myChart = ctx.$echarts.init(dom);
                
                    let color = [
                        "#0090FF",
                        "#36CE9E",
                        "#FFC005",
                        "#FF515A",
                        "#8B5CFF",
                        "#00CA69"
                    ];
                    let echartData = [{
                            name: "1",
                            value1: 100,
                            value2: 233
                        },
                        {
                            name: "2",
                            value1: 138,
                            value2: 233
                        },
                        {
                            name: "3",
                            value1: 350,
                            value2: 200
                        },
                        {
                            name: "4",
                            value1: 173,
                            value2: 180
                        },
                        {
                            name: "5",
                            value1: 180,
                            value2: 199
                        },
                        {
                            name: "6",
                            value1: 150,
                            value2: 233
                        },
                        {
                            name: "7",
                            value1: 180,
                            value2: 210
                        },
                        {
                            name: "8",
                            value1: 230,
                            value2: 180
                        }
                    ];

                    let xAxisData = echartData.map(v => v.name);
                    //  ["1", "2", "3", "4", "5", "6", "7", "8"]
                    let yAxisData1 = echartData.map(v => v.value1);
                    // [100, 138, 350, 173, 180, 150, 180, 230]
                    let yAxisData2 = echartData.map(v => v.value2);
                    // [233, 233, 200, 180, 199, 233, 210, 180]
                    const hexToRgba = (hex, opacity) => {
                        let rgbaColor = "";
                        let reg = /^#[\da-f]{6}$/i;
                        if (reg.test(hex)) {
                            rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                        "0x" + hex.slice(3, 5)
                        )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
                        }
                        return rgbaColor;
                    }

                    let option = {
                        color: color,
                        legend: {
                            right: 10,
                            top: 1
                        },
                        tooltip: {
                            trigger: "axis",
                            formatter: function(params) {
                                let html = '';
                                params.forEach(v => {
                                    html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                                    <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                                    ${v.seriesName}.${v.name}
                                    <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                                    万元`;
                                })
                                return html
                            },
                            extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                            axisPointer: {
                                type: 'shadow',
                                shadowStyle: {
                                    color: '#ffffff',
                                    shadowColor: 'rgba(225,225,225,1)',
                                    shadowBlur: 5
                                }
                            }
                        },
                        grid: {
                            top: '15%',
                            bottom:1,
                            containLabel: true
                        },
                        xAxis: [{
                            type: "category",
                            boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}月',
                                textStyle: {
                                    color: "#fff"
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#D9D9D9"
                                }
                            },
                            data: xAxisData
                        }],
                        yAxis: [{
                            type: "value",
                            name: '单位：万千瓦时',
                            axisLabel: {
                                textStyle: {
                                    color: "#fff"
                                }
                            },
                            nameTextStyle: {
                                color: "#666",
                                fontSize: 12,
                                lineHeight: 40
                            },
                            splitLine: {
                                lineStyle: {
                                    type: "dashed",
                                    color: "#E9E9E9"
                                }
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            }
                        }],
                        series: [{
                            name: "2018",
                            type: "line",
                            smooth: true,
                            // showSymbol: false,/
                            symbolSize: 8,
                            zlevel: 3,
                            lineStyle: {
                                normal: {
                                    color: color[0],
                                    shadowBlur: 3,
                                    shadowColor: hexToRgba(color[0], 0.5),
                                    shadowOffsetY: 8
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: ctx.$echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [{
                                                offset: 0,
                                                color: hexToRgba(color[0], 0.1)
                                            },
                                            {
                                                offset: 1,
                                                color: hexToRgba(color[0], 0.1)
                                            }
                                        ],
                                        false
                                    ),
                                    shadowColor: hexToRgba(color[0], 0.1),
                                    shadowBlur: 10
                                }
                            },
                            data: yAxisData1
                        }, {
                            name: "2019",
                            type: "line",
                            smooth: true,
                            // showSymbol: false,
                            symbolSize: 8,
                            zlevel: 3,
                            lineStyle: {
                                normal: {
                                    color: color[1],
                                    shadowBlur: 3,
                                    shadowColor: hexToRgba(color[1], 0.5),
                                    shadowOffsetY: 8
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: ctx.$echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [{
                                                offset: 0,
                                                color: hexToRgba(color[1], 0.1)
                                            },
                                            {
                                                offset: 1,
                                                color: hexToRgba(color[1], 0.1)
                                            }
                                        ],
                                        false
                                    ),
                                    shadowColor: hexToRgba(color[1], 0.1),
                                    shadowBlur: 10
                                }
                            },
                            data: yAxisData2
                        }]
                    };
                
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            function drawYh(){
                var dom = document.getElementById("yhpcChart");
                var myChart = ctx.$echarts.init(dom);
                let option = {
                   
                    grid: {
                        top: "35%",
                        bottom: "15%"//也可设置left和right设置距离来控制图表的大小
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: true
                            }
                        }
                    },
                    legend: {
                        data: ["销售水量", "主营业务"],
                        top: "15%",
                        textStyle: {
                            color: "#ffffff"
                        }
                    },
                    xAxis: {
                        data: [
                            "1月",
                            "2月",
                            "3月",
                            "4月",
                            "5月",
                            "6月",
                            "7月",
                            "8月",
                            "9月",
                            "10月",
                            "11月",
                            "12月",
                            
                        ],
                        axisLine: {
                            show: true, //隐藏X轴轴线
                            lineStyle: {
                                color: '#01FCE3'
                            }
                        },
                        axisTick: {
                            show: true //隐藏X轴刻度
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff" //X轴文字颜色
                            }
                        },
                        
                    },
                    yAxis: [{
                            type: "value",
                            name: "亿元",
                            nameTextStyle: {
                                color: "#fff"
                            },
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: true
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                            color: '#FFFFFF'
                                            }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#fff"
                                }
                            },
                            
                        },
                        {
                            type: "value",
                            name: "同比",
                            nameTextStyle: {
                                color: "#ebf8ac"
                            },
                            show:false,
                            position: "right",
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                formatter: "{value} %", //右侧Y轴文字显示
                                textStyle: {
                                    color: "#fff"
                                }
                            }
                        },
                        {
                            type: "value",
                            gridIndex: 0,
                            min: 50,
                            max: 100,
                            splitNumber: 8,
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                show: false
                            },
                            splitArea: {
                                show: true,
                                areaStyle: {
                                    color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                                }
                            }
                        }
                    ],
                    series: [{
                            name: "销售水量",
                            type: "line",
                            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                            smooth: false, //平滑曲线显示
                            showAllSymbol: true, //显示所有图形。
                            symbol: "circle", //标记的图形为实心圆
                            symbolSize: 10, //标记的大小
                            itemStyle: {
                                //折线拐点标志的样式
                                color: "#058cff"
                            },
                            lineStyle: {
                                color: "#058cff"
                            },
                            areaStyle:{
                                color: "rgba(5,140,255, 0.2)"
                            },
                            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5, 2.9, 2.8, 3, 5]
                        },
                        {
                            name: "主营业务",
                            type: "bar",
                            barWidth: 15,
                            itemStyle: {
                                normal: {
                                    color:"rgba(55,220,255,1)",
                                    // color: ctx.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    //         offset: 0,
                                    //         color: "#00FFE3"
                                    //     },
                                    //     {
                                    //         offset: 1,
                                    //         color: "#4693EC"
                                    //     }
                                    // ])
                                }
                            },
                            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5, 2.9, 2.8, 3, 5]
                        }
                    ]
                };
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            onMounted(()=>{
                drawYj()
                drawFx()
                drawYh()
            })
            return {
                title,
                
            }
        }
    }
</script>

<style lang="stylus" scoped>
  @import '../../../assets/varibles.styl'
    .leftFx
        margin-top:vh(20)
        .zerenContent
            .zerenTitle
                display:flex
                justify-content : space-around
                div
                    color: rgba(0,234,255,1)  
                    flex:1
                    font-size:vw(16)
                    text-align:center
                    height:vh(50)
                    line-height: vh(60)   
        .twoCharts
            display:flex
            width:100%
            height:vh(110)
            margin-bottom:vh(20)
            #yujingChart
                flex:4
                height:vh(120)
            #fenxiChart
                flex:6
                height:vh(120)
        #yhpcChart
            width:100%
            height:vh(190)
        .geoIntro
            width:vw(365)
            margin-top:vh(20)
            display:flex
            justify-content:space-between
            .geoIntroTitle
                margin-bottom:vh(13)
                display:flex
                .sideLine
                    width:vw(2)
                    height:vh(15)
                    margin-right:vw(10)
                    background: #86ceeb
                .geoIntroWord
                    color:#00EAFF
                    font-size:vw(16)

</style>